import { View, Text } from '@tarojs/components'
import React, { useEffect, useImperativeHandle, useMemo } from 'react'

import './voice-recorder.scss'
import Taro from '@tarojs/taro'
import { ShowFail } from '@/utils'

let recordTime = new Date().getTime()

const waves = Array.from({ length: 6 }, () => null)
const recorder = Taro.getRecorderManager()
let cancelStore = false
const VoiceRecorder = React.forwardRef<
    {
        start: () => void,
        stop: () => void
    },
    {
        id?: string,
        visible: boolean,
        location: { clientX, clientY } | null,
        onFinish?: (e: any) => void
    }>((props, ref) => {
        
        useImperativeHandle(ref, () => {
            return {
                start: () => {
                    recorder.start({
                        duration: 600000,
                        // 这个地方设置为1的话，识别精度会降低
                        numberOfChannels: 1,
                        sampleRate: 16000,
                        format: "PCM",
                        frameSize: 4
                    })
                },
                stop: () => {
                    recorder.stop()
                }
            }
        }, [])

        Taro.useDidShow(() => {
            // 重置状态
            cancelStore = false
        })

        const isCancel = useMemo(() => {
            const { screenWidth, screenHeight } = Taro.getWindowInfo()
            // 圆心坐标
            const cy = screenWidth * 0.65 + screenHeight
            const cx = 0.5 * screenWidth

            cancelStore = false
            if (props.location) {
                const { clientX, clientY } = props.location
                cancelStore = (clientX - cx) ** 2 + (clientY - cy) ** 2 > screenWidth ** 2
            }
            return cancelStore
        }, [props.location])

        useEffect(() => {
            recorder.onStart(() => {
                recordTime = new Date().getTime()                
            })
            recorder.onStop(e => {
                if (cancelStore) {
                } else if (new Date().getTime() - recordTime < 1000) {
                    ShowFail('说话时间太短')
                } else {
                    props.onFinish && props.onFinish(e.tempFilePath)
                }
            })
        }, [])

        return <View id={props.id} className="component-container flex-column flex-item" style={{ display: props.visible ? 'flex' : 'none' }}>
            <View className={`animate-container ${(isCancel ? 'is-cancel' : '')}`}>
                <View className="audio">
                    {
                        waves.map((_, index) => {
                            return <View key={index} className="wave"></View>
                        })
                    }
                </View>
            </View>
            <View className="bg-ball">
                <View className={`cancel-btn font-size32 ${isCancel ? 'is-active' : ''}`}>
                    <Text className="iconfont icon-base-close2"></Text>
                </View>
                <View className="send-tip font-size32">松开 {isCancel ? '取消' : '发送'}</View>
                <View className="voice-icon flex-column flex-center">
                    <Text className="iconfont icon-shengyin"></Text>
                </View>
            </View>
        </View>
    })
export default VoiceRecorder
